<template>
    <!--导航-->
    <div>
        <el-breadcrumb separator-class="el-icon-arrow-right">
         <el-breadcrumb-item :to="{ path: '/users' }">首页</el-breadcrumb-item>
         <el-breadcrumb-item>活动管理</el-breadcrumb-item>
         <el-breadcrumb-item>活动列表</el-breadcrumb-item>
         <el-breadcrumb-item>活动详情</el-breadcrumb-item>
       </el-breadcrumb>
       <el-card class="box-card" :body-style="{ padding: '10px'}">
           <el-row>
               <el-col :span="4"><el-button type="primary" @click="showAddCate" class="elBtn">添加用户</el-button></el-col>
           </el-row>
           <!--商品列表树  :data='cateList'绑定的数据 :columns="columns"列里要显示的内容-->
           <tree-table :data='cateList' show-index index-text='#' :columns="columns" border :expand-type='false'
           :selection-type='false' class="tree">
              <template  slot="isok" scope="scope">
                 <i class="el-icon-check" v-if="scope.row.cat_deleted==true"></i>
                 <i class="el-icon-close" v-else-if="scope.row.cat_deleted==false"></i>
              </template>
              <template slot='levels' scope="scope">
                  <el-tag type='primary' v-if="scope.row.cat_level==0">一级</el-tag>
                  <el-tag type="success" v-if="scope.row.cat_level==1">二级</el-tag>
                  <el-tag type="danger" v-if="scope.row.cat_level==2">三级</el-tag>
              </template>
              <template slot="caoz">
                  <el-button type='primary'>操作一</el-button>
                  <el-button type='success'>操作二</el-button>
              </template>
           </tree-table>
           <!--页码-->
           <div class="block">
               <el-pagination
               @size-change="handleSizeChange"  
               @current-change="handleCurrentChange"
               :current-page="queryInfo.pagenum"
               :page-sizes="[5,10,15,20]"
               :page-size="queryInfo.pagesize"
                layout="total, sizes, prev, pager, next, jumper"
               :total="total">
               </el-pagination>
             </div>
       </el-card>
       <!--添加商品分类-->
       <el-dialog title="添加商品分类" :visible.sync="addCateVisible" @close='resetForm'>
             <el-form :model="addCateForm" label-width="100px" label-position='left' :rules="rules" ref="ruleForm" :hide-required-asterisk='false'>
               <el-form-item label="商品分类" prop='cat_name'>
                  <el-input v-model="addCateForm.cat_name" autocomplete="off" ></el-input>
               </el-form-item>
               <el-form-item label="请选择" >
                   <!--v-model="selectKeys" 选择的节点 :options="parentCate"绑定的数据 :props="cateProps"要显示的项目 -->
                  <el-cascader v-model="selectKeys" :options="parentCate" :props="cateProps" 
                  @change="handleChange" :clearable='true' class="selectkey"></el-cascader>
               </el-form-item>
            </el-form>
            <div slot="footer" >
               <el-button @click="addCateVisible = false">取 消</el-button>
               <el-button type="primary" @click="addCatePost">确 定</el-button>
            </div>
           </el-dialog>
    </div>
</template>
<script>
export default {
    created(){
        this.getCategories()
    },
    data(){
        return {
            //商品列表
            cateList:[],
            //商品树 列数据
            columns:[{
                label:'分类名称',
                prop:'cat_name',
            },{
                label:'是否有效',
                prop: 'cat_deleted',
                type: 'template',
                template: 'isok',
                width: '200px',
                align:'center'
            },{
                label:'级别',
                prop:'cat_level',
                type: 'template',
                template: 'levels',
                width: '200px',
                align:'center'
            },{
                label:'操作',
                type:'template',
                template:'caoz'
            }],
            //页码 搜索条件
            queryInfo:{
                type:3,
                pagenum:1,
                pagesize:5
            },
            total:0,
            //添加商品分类
            addCateVisible:false,
            //新加入商品分类信息
            addCateForm:{
                cat_name:'',
                cat_pid:0,
                cat_level:0
            },
            //父节点商品信息
            parentCate:[],
            rules:{
                cat_name: [
                 { required: true, message: '请输入商品名称', trigger: 'blur' },
                ]
            },
            selectKeys:[],
            //关联选择器要显示的内容和设置
            cateProps:
                {
                    value:'cat_id',
                    label:'cat_name',
                    children:'children',
                    expandTrigger:'hover',
                    checkStrictly:true
                }
 
        }
    },
    methods:{
        //获取商品数据列表
        async getCategories(){
            const {data:res}=await this.$http.get('categories',{params:this.queryInfo})
            if(res.meta.status!=200) return this.$message.error('获取数据失败')
            this.cateList=res.data.result
            this.total=res.data.total
        },
         //修改每页显示条数
        handleSizeChange(val){
           this.queryInfo.pagesize=val;
           this.getCategories()
        },
        //显示当前页数的信息
        handleCurrentChange(val){
           this.queryInfo.pagenum=val
           this.getCategories()
        },
        //添加商品
        showAddCate(){
            this.addCateVisible=true
            this.getParnentKey()
        },
        resetForm(){
            this.$refs.ruleForm.resetFields()
            this.selectKeys=[]
            this.addCateForm.cat_pid=0
            this.addCateForm.cat_level=0
        },
        //获取父节点商品数据
        async getParnentKey(){
            const {data:res}=await this.$http.get('categories',{params:{type:2}})
            if(res.meta.status!=200) return this.$message.error('请求数据失败')
            this.parentCate=res.data
            
        },
        handleChange(){
            //父节点选择器发生改变时 
            if(this.selectKeys.length>0){
                this.addCateForm.cat_pid=this.selectKeys[this.selectKeys.length-1]
                this.addCateForm.cat_level=this.selectKeys.length
                return
            }else{
                this.addCateForm.cat_pid=0
                this.addCateForm.cat_level=0
            }
        },
        addCatePost(){
            this.$refs.ruleForm.validate(async valid=>{
                if(!valid) return 
                const {data:res}=await this.$http.post('categories',this.addCateForm)
                console.log(res);
                if(res.meta.status!=201) return this.$message.error('添加分类失败')
                this.getCategories()
                this.addCateVisible=false
            })
            
        }
    }
}
</script>
<style lang="less" scope>
   .box-card{
       margin-top:5px
   }
   .elBtn{
       position: relative;
       left: -40px;
   }
   .tree{
       margin-top: 10px;
   }
   .selectkey{
       width: 100%;
   }
</style>